import React, { useEffect, useState } from 'react';
import moment from 'moment';
// import type { ColumnsType } from 'antd/es/table';
// import { useHistory } from 'umi';
import type { TableRowSelection } from 'antd/es/table/interface';
import { Button, Table, Input } from 'antd';
import SearchForm from '@/components/SearchForm';
// import CustomTable from '@/components/Table';
// import { taskStatusEnum } from './enum';
import { getTaskCenterList } from '@/service/personal/taskCenter';
// import { getPublicDownloadUrl } from '@/service/personal';

const formItemLayout = {
  labelCol: { flex: '80px' },
  wrapperCol: { flex: '1' },
};

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const data: DataType[] = [];
// eslint-disable-next-line no-plusplus
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

export default function TaskCenter() {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  // const history = useHistory();

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
    getCheckboxProps: (record: DataType) => ({
      disabled: record.key === 1, // Column configuration not to be checked
      // name: record.name,
    }),
    // selections: [
    //   Table.SELECTION_ALL,
    //   Table.SELECTION_INVERT,
    //   Table.SELECTION_NONE,
    //   {
    //     key: 'odd',
    //     text: 'Select Odd Row',
    //     onSelect: (changableRowKeys) => {
    //       let newSelectedRowKeys = [];
    //       newSelectedRowKeys = changableRowKeys.filter((_, index) => {
    //         if (index % 2 !== 0) {
    //           return false;
    //         }
    //         return true;
    //       });
    //       setSelectedRowKeys(newSelectedRowKeys);
    //     },
    //   },
    //   {
    //     key: 'even',
    //     text: 'Select Even Row',
    //     onSelect: (changableRowKeys) => {
    //       let newSelectedRowKeys = [];
    //       newSelectedRowKeys = changableRowKeys.filter((_, index) => {
    //         if (index % 2 !== 0) {
    //           return true;
    //         }
    //         return false;
    //       });
    //       setSelectedRowKeys(newSelectedRowKeys);
    //     },
    //   },
    // ],
  };

  const formItems: any[] = [
    {
      type: 'group',
      key: 'group1',
      groupItems: [
        {
          type: 'input',
          label: '补贴月份',
          name: 'taskType',
          key: 'taskType',
        },
        {
          type: 'input',
          label: '区域名称',
          name: 'taskType',
          key: 'taskType',
        },
        {
          type: 'select',
          label: '城市名称',
          name: 'taskType',
          key: 'taskType',
          items: [
            {
              value: '采购计划申请',
              text: '采购计划申请',
            },
            {
              value: '付款申请',
              text: '付款申请',
            },
            {
              value: '车辆指标',
              text: '车辆指标',
            },
            {
              value: '保险列表',
              text: '保险列表',
            },
            {
              value: '处置列表',
              text: '处置列表',
            },
          ],
        },
        {
          type: 'input',
          label: '主体名称',
          name: 'taskType',
          key: 'taskType',
        },
      ],
    },
    {
      type: 'group',
      key: 'group2',
      groupItems: [
        {
          type: 'select',
          label: '订单位置',
          name: 'username',
          key: 'username',
          items: [],
        },
        {
          type: 'select',
          label: '订单类型',
          name: 'taskType',
          key: 'taskType',
          items: [],
        },
        {
          type: 'input',
          label: '订单号',
          name: 'taskType',
          key: 'taskType',
        },
        {
          type: 'input',
          label: '公司名称',
          name: 'taskType',
          key: 'taskType',
        },
      ],
    },
    {
      type: 'group',
      key: 'group3',
      groupItems: [
        {
          type: 'input',
          label: '司机姓名',
          name: 'username',
          key: 'username',
        },
        {
          type: 'input',
          label: '车牌号',
          name: 'username',
          key: 'username',
        }
      ],
    },
  ];

  const columns: any = [
    {
      title: '补贴月份',
      dataIndex: 'taskId',
      align: 'center',
      width: 100,
    },
    {
      title: '提车月份',
      dataIndex: 'taskType',
      align: 'center',
      width: 100,
      render: (text: any) => <span>{text || '--'}</span>,
    },
    {
      title: '区域名称',
      dataIndex: 'taskName',
      align: 'center',
      width: 100,
    },
    {
      title: '城市名称',
      dataIndex: 'queryCondition',
      align: 'center',
      width: 100,
    },
    {
      title: '所属主体名称',
      dataIndex: 'username',
      align: 'center',
      width: 100,
    },
    {
      title: '公司',
      dataIndex: 'phone',
      align: 'center',
      width: 100,
    },
    {
      title: '司机姓名',
      dataIndex: 'creatDate',
      align: 'center',
      width: 100,
    },
    {
      title: '司机ID',
      dataIndex: 'finishTime',
      align: 'center',
      width: 100,
    },
    {
      title: '订单位置',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
      // render: (text:string) => taskStatusEnum[text]
    },
    {
      title: '订单类型',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
      // render: (text:string) => taskStatusEnum[text]
    },
    {
      title: '订单标签',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
      // render: (text:string) => taskStatusEnum[text]
    },
    {
      title: '订单号',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
      // render: (text:string) => taskStatusEnum[text]
    },
    {
      title: '车牌号',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
      // render: (text:string) => taskStatusEnum[text]
    },
    {
      title: '车型简称',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
      // render: (text:string) => taskStatusEnum[text]
    },
    {
      title: '网约车订单品类',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
      // render: (text:string) => taskStatusEnum[text]
    },
    {
      title: '提车日期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
      // render: (text:string) => taskStatusEnum[text]
    },
    {
      title: '租期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
      // render: (text:string) => taskStatusEnum[text]
    },
    {
      title: '预计结束日期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '订单实际结束日期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '押金',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '首付',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '月租金',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '服务费',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '总租金（租金+服务费）',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '尾款',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '延租天数',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '延租金额',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '免租金额',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '返现金额',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '实物金额',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '补贴合计',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '是否有奖励达成',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第1期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第2期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第3期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第4期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第5期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第6期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第7期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第8期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第9期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第10期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第11期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第12期',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '历史发放金额',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第1期-实际值',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第2期-实际值',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第3期-实际值',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第4期-实际值',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第5期-实际值',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第6期-实际值',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第7期-实际值',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第8期-实际值',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第9期-实际值',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第10期-实际值',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第11期-实际值',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '第12期-实际值',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '是否提前退车',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '已发放奖励是否追回',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '追回金额',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 100,
    },
    {
      title: '备注',
      dataIndex: 'taskStatus',
      align: 'center',
      width: 200,
      render:()=>(
          <Input />
        )
    },


  ];

  const [formData, setFormData] = useState({});
  // const [total, setTotal] = useState();
  const [params, setParams] = useState({
    current: 1,
    pageSize: 10,
  });
  // const [tableList, setTableList] = useState<any[]>([]);
  // const [loading, setLoading] = useState(false);



  const getTabelValue = async (value: any, pagination?: any) => {
    // setLoading(true)
    let values = value;
    if (values?.date) {
      values.createTime = moment(values.date[0]).format('YYYY-MM-DD');
      values.endTime = moment(values.date[1]).format('YYYY-MM-DD');
      delete values.date;
    }
    setFormData(values);
    const newPagination = pagination
      ? {
          ...pagination,
          size: pagination.pageSize,
        }
      : {
          current: 1,
          size: params.pageSize,
        };
    setParams(newPagination);
    values = {
      ...values,
      ...newPagination,
    };
    const res = await getTaskCenterList(values);
    if (res?.data) {
      // setTotal(res.data?.total || 0)
      if (res.data?.records) {
        // setTableList(res.data?.records || [])
      }
    }
    // setLoading(false)
  };

  useEffect(() => {
    getTabelValue(formData);
  }, []);

  const onFinish = (values: any) => {
    getTabelValue(values);
    // eslint-disable-next-line no-param-reassign
  };
  // const onFinishModal = (values: any) => {
  //   console.log(values);
  //   // eslint-disable-next-line no-param-reassign
  // };

  // 搜索重置
  const onReset = () => {
    getTabelValue({});
  };


  return (
    <div>
      <SearchForm
        onFinish={onFinish}
        onReset={onReset}
        formItems={formItems}
        formLayout={formItemLayout}
      />
      {/* <CustomTable
            params={params}
            columns={columns}
            total={total}
            pagination
            callback={(pagination: any) => {
              getTabelValue(formData,pagination);
            }}
            loading={loading}
            dataSource={tableList}
          /> */}
      <div>
       <div style={{height:'60px',marginTop:'20px'}}>
        <Button>导出</Button>
       </div>
      </div>
      <Table
        rowSelection={rowSelection}
        scroll={{ x: 5000 }}
        columns={columns}
        dataSource={data}
      />
    </div>
  );
}
